<!-- 修改会员 -->
<!Doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>修改会员</title>
    <meta name="keywords" content="${keywords}"/>
    <meta name="description" content="${description}"/>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{'/static/images/favicon.ico'}" media="screen" />

    <link th:href="@{'/static/css/common.css'}" type="text/css" rel="stylesheet">
    <link th:href="@{'/static/css/themify-icons/style.css'}" type="text/css" rel="stylesheet">
    <script language="javascript" th:src="@{'/static/js/tool.js'}" type="text/javascript"></script>
    <script language="javascript" th:src="@{'/static/js/ajax.js'}" type="text/javascript"></script>
    <script language="javascript" th:src="@{'/static/js/json2.js'}" type="text/javascript"></script>
    <script th:src="@{'/static/js/cryptoJS/core.js'}" language="javascript" type="text/javascript"></script>
    <script th:src="@{'/static/js/cryptoJS/sha256.js'}" language="javascript" type="text/javascript"></script>
    <script th:src="@{'/static/js/jquery/jquery.min.js'}" language="javascript" type="text/javascript"></script>
    <script th:src="@{'/static/js/jquery/jquery.form.js'}" language="javascript" type="text/javascript"></script>
    <link th:href="@{'/static/js/jcrop/css/jquery.Jcrop.min.css'}" type="text/css" rel="stylesheet">
    <script th:src="@{'/static/js/jcrop/js/jquery.Jcrop.min.js'}" language="javascript" type="text/javascript"></script>

    <script type="text/javascript" th:src="@{'/static/js/jquery/jquery.letterAvatar.js'}"
            language="javascript"></script>

    <link th:href="@{'/static/js/layer/skin/default/layer.css'}" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" th:src="@{'/static/js/layer/layer.js'}" language="javascript"></script>
</head>

<script type="text/javascript" language="javascript">


    //确认提交
    function sureSubmit(objForm) {
        if (allVerification() == false) {
            //需引入layer
            layer.msg('请填好资料再提交', {
                    time: 3000 //3秒关闭（如果不配置，默认是3秒）
                }, function () {//关闭后的操作

                }
            );
            return;
        }


        //密码需SHA256加密
        var password = document.getElementById("password").value;
        // if (password != "") {
        //     document.getElementById("password").value = CryptoJS.SHA256(password);
        //
        //     //旧密码
        //     var oldPassword = document.getElementById("oldPassword").value;
        //     if (oldPassword != "") {
        //         document.getElementById("oldPassword").value = CryptoJS.SHA256(oldPassword);
        //     }
        // }
        if (password != "") {
            document.getElementById("password").value = password;

            //旧密码
            var oldPassword = document.getElementById("oldPassword").value;
            if (oldPassword != "") {
                document.getElementById("oldPassword").value = oldPassword;
            }
        }
        document.getElementById("editUserForm").submit();
    }

    //ajax提交
    function ajaxSubmit() {

        if (allVerification() == false) {
            //需引入layer
            layer.msg('请填好资料再提交', {
                    time: 3000 //3秒关闭（如果不配置，默认是3秒）
                }, function () {//关闭后的操作

                }
            );
            return;
        }

        var parameter = getParameter();
        if (parameter.indexOf("&") == 0) {
            parameter = parameter.substring(1, parameter.length);
        }
        post_request(function (value) {
            if (value != "") {
                var returnValue = JSON.parse(value);//JSON转为对象
                for (var key in returnValue) {
                    if (key == "success") {
                        var success = returnValue[key];
                        if (success == "true") {
                            alert("修改成功");
                            //刷新当前在页面
                            window.location.reload();
                        }
                    } else if (key == "error") {
                        var errorValue = returnValue[key];
                        for (var error in errorValue) {
                            if (error != "") {
                                document.getElementById(error + "_error").innerHTML = errorValue[error];
                            }
                        }
                    }
                }
            }
        },
            "user/control/editUser?&timestamp=" + new Date().getTime(), true, parameter);

    }


    //组装参数
    function getParameter() {
        var parameter = "";
        //令牌标记
        var token = document.getElementById("token").value;
        parameter += "&token=" + token;

        var nickname = document.getElementById("nickname");
        if (nickname != null) {
            parameter += "&nickname=" + nickname.value;
        }
        var allowUserDynamic_radio = document.getElementsByName("allowUserDynamic");
        for (var i = 0; i < allowUserDynamic_radio.length; i++) {
            if (allowUserDynamic_radio[i].checked) {
                parameter += "&allowUserDynamic=" + allowUserDynamic_radio[i].value;
            }
        }

        //密码需SHA256加密
        var password = document.getElementById("password").value;
        if (password != "") {
            parameter += "&password=" + CryptoJS.SHA256(password);
            //旧密码
            var oldPassword = document.getElementById("oldPassword").value;
            if (oldPassword != "") {
                parameter += "&oldPassword=" + CryptoJS.SHA256(oldPassword);
            }
        }


        //自定义表单name集合
        var array = new Array();

        //读取表单所有的input标签
        var all_input = document.getElementsByTagName("input");
        for (var i = 0; i < all_input.length; i++) {
            var obj = all_input[i];
            if (obj.name.substring(0, 11) == "userCustom_") {
                var isExist = false;//是否已存在数组中
                //如果存在，则不添加
                for (var j = 0; j < array.length; j++) {
                    if (array[j] == all_input[i].name) {
                        isExist = true;
                        break;
                    }
                }
                if (isExist == false) {
                    array.push(all_input[i].name);
                }
            }
        }
        //读取表单所有的select标签
        var all_select = document.getElementsByTagName("select");
        for (var i = 0; i < all_select.length; i++) {
            var obj = all_select[i];
            if (obj.name.substring(0, 11) == "userCustom_") {
                var isExist = false;//是否已存在数组中
                //如果存在，则不添加
                for (var j = 0; j < array.length; j++) {
                    if (array[j] == all_select[i].name) {
                        isExist = true;
                        break;
                    }
                }
                if (isExist == false) {
                    array.push(all_select[i].name);
                }
            }
        }
        //读取表单所有的textarea标签
        var all_textarea = document.getElementsByTagName("textarea");
        for (var i = 0; i < all_textarea.length; i++) {
            var obj = all_textarea[i];
            if (obj.name.substring(0, 11) == "userCustom_") {
                var isExist = false;//是否已存在数组中
                //如果存在，则不添加
                for (var j = 0; j < array.length; j++) {
                    if (array[j] == all_textarea[i].name) {
                        isExist = true;
                        break;
                    }
                }
                if (isExist == false) {
                    array.push(all_textarea[i].name);
                }
            }
        }

        for (var i = 0; i < array.length; i++) {
            //读取表单参数
            var obj = document.getElementsByName(array[i]);
            if (obj[0].type == "text") {//输入框

                parameter += "&" + obj[0].name + "=" + encodeURIComponent(obj[0].value);
            }
            if (obj[0].type == "radio") {//单选
                for (var j = 0; j < obj.length; j++) {
                    if (obj[j].checked) {
                        parameter += "&" + obj[0].name + "=" + obj[j].value;
                        break;
                    }
                }
            }
            if (obj[0].type == "checkbox") {//多选
                for (var j = 0; j < obj.length; j++) {
                    if (obj[j].checked) {
                        parameter += "&" + obj[0].name + "=" + obj[j].value;
                    }
                }
            }
            if (obj[0].type.substring(0, 6) == "select") {//下拉列表
                for (var j = 0; j < obj[0].length; j++) {
                    if (obj[0][j].selected) {
                        parameter += "&" + obj[0].name + "=" + obj[0][j].value;
                    }
                }
            }
            if (obj[0].type == "textarea") {//表单域
                parameter += "&" + obj[0].name + "=" + encodeURIComponent(obj[0].value);

            }
        }


        //删除第一个&号,防止因为多了&号而出现警告: Parameters: Invalid chunk ignored.信息
        if (parameter.indexOf("&") == 0) {
            parameter = parameter.substring(1, parameter.length);
        }
        return parameter;
    }


    //验证参数
    function verification(field) {
        if (field == "password") {//密码
            var parameter = document.getElementById(field).value;
            if (parameter != "") {
                var parameter_trim = trim(parameter);
                if (parameter_trim != "") {
                    if (getStringLeng(parameter_trim) < 6) {
                        document.getElementById(field + "_error").innerHTML = "密码长度不能小于6位";
                        return false;
                    }
                    if (getStringLeng(parameter_trim) > 20) {
                        document.getElementById(field + "_error").innerHTML = "密码长度不能大于20位";
                        return false;
                    }
                } else {
                    document.getElementById(field + "_error").innerHTML = "密码不能为空";
                    return false;
                }
                //旧密码
                var oldPassword = document.getElementById("oldPassword").value;
                if (oldPassword == "") {
                    document.getElementById("oldPassword_error").innerHTML = "旧密码不能为空";
                }
            }
        }
        if (field == "confirmPassword") {//确认密码
            var password = document.getElementById("password").value;

            var parameter = document.getElementById(field).value;
            if (password != parameter) {
                document.getElementById(field + "_error").innerHTML = "两次密码不相等";
                return false;
            }
        }

        document.getElementById(field + "_error").innerHTML = "";
        return true;
    }

    //验证全部参数
    function allVerification() {
        var isVerification = true;
        if (verification("password") == false) {
            isVerification = false;
        }
        if (verification("confirmPassword") == false) {
            isVerification = false;
        }
        return isVerification;
    }

    //禁止浏览器后退
    //	window.history.forward(1);
</script>


<script type="text/javascript" language="javascript" th:inline="javascript">
    /*<![CDATA[*/
    var commonPath = /*[[@{/static/}]]*/ '';
    /*]]>*/


    //html文件要加入<meta name="commonPath" content="${commonPath}"/>标签
    //从meta标签获取模板路径
    var meta = document.getElementsByTagName("meta");
    for (var i = 0; i < meta.length; i++) {
        if (meta[i].name == "commonPath") {
            commonPath = meta[i].getAttribute("content");
        }
    }
    //空白图片
    var blankImage = commonPath + "images/null.gif";
    //头像图层
    var avatarDiv = "<div id='avatarTag'>";
    avatarDiv += "        <div id='originalImage_box' class='original-box'><div id='image_crop_original_div' class='image-crop-original-div'></div><img id='originalImage' src='" + blankImage + "' alt='原图'></div>";
    avatarDiv += "        <div id='preview-pane' class='preview-pane'>";
    avatarDiv += "            <div id='previewImage_box' class='preview-container'>";
    avatarDiv += "                <div id='image_crop_preview_div' class='image-crop-preview-div'></div>";
    avatarDiv += "                <img id='previewImage' src='" + blankImage + "' alt='缩略图'>";
    avatarDiv += "            </div>";
    avatarDiv += "        </div>";
    avatarDiv += "        <div id='preview-pane2' class='preview-pane2'>";
    avatarDiv += "            <div id='previewImage_box2' class='preview-container2'>";
    avatarDiv += "                <div id='image_crop_preview_div2' class='image-crop-preview-div'></div>";
    avatarDiv += "                <img id='previewImage2' src='" + blankImage + "' alt='缩略图'>";
    avatarDiv += "            </div>";
    avatarDiv += "        </div>";
    avatarDiv += "</div>";


    //头像表单
    var avatarForm = "<form id='uploadImageForm' enctype='multipart/form-data'>";
    avatarForm += "    <div class='avatarModule '>";
    avatarForm += avatarDiv;

    avatarForm += "        <div class='bottomInfo'>";
    avatarForm += "            <div class='button-box'>";
    avatarForm += "                <i id='progressBar' class='progressBar'></i>&nbsp;&nbsp;";
    avatarForm += "                <span>选择图片<input type='file' style='width: 104px;' id='file' name='file' onchange='imgForm(this)'/></span>";
    avatarForm += "                <span class='on' id='uploadSubmit' onClick='javascript:uploadImageSubmit();'>上传</span>";
    avatarForm += "            </div>";
    avatarForm += "        </div>";
    avatarForm += "   </div>";
    avatarForm += "</form>";


    //显示/隐藏 更改头像层
    $(function () {
        $("#updateAvatarLink").hide(); // 默认隐藏所有内层元素
        $(".updateAvatar").hover(function () {  // 鼠标经过事件
            $(this).find("#updateAvatarLink").toggle();  // 切换显示和隐藏
        }, function () {
            $(this).find("#updateAvatarLink").toggle();  // 切换显示和隐藏

        });
    });


    //更换头像弹出层
    function avatarLayer() {
        var div = avatarForm;
        layer.open({
            type: 1,
            title: "更换头像",
            content: div, //这里content是一个普通的String
            moveOut: true,//是否允许拖拽到窗口外
            area: ['666px', '518px'],//宽高
            success: function (layero, index) {
            }
        });
    }


    var width;// 裁剪框的宽度  
    var height;// 裁剪框的高度  
    var x;// 相对于裁剪图片x左边  
    var y;// 相对于裁剪图片y左边  

    //创建变量(在这个生命周期)的API和图像大小  
    var jcrop_api,
        boundx,//原图的宽
        boundy,//原图的高
        originalImage_realSrc,//原图路径 IE7-IE9使用
        $preview,
        $pcnt,
        $pimg,
        xsize,//预览窗口的宽
        ysize,//预览窗口的高

        $preview2,
        $pcnt2,
        $pimg2,
        xsize2,//预览窗口的宽
        ysize2,//预览窗口的高
        scaleFactor;//缩放比例

    //图像裁剪
    function imageCropp(bgColor) {
        //获取预览窗格相关信息
        $preview = $('#preview-pane'),
            $pcnt = $('#preview-pane .preview-container'),
            $pimg = $('#preview-pane .preview-container img'),
            xsize = $pcnt.width(),
            ysize = $pcnt.height();

        $preview2 = $('#preview-pane2'),
            $pcnt2 = $('#preview-pane2 .preview-container2'),
            $pimg2 = $('#preview-pane2 .preview-container2 img'),
            xsize2 = $pcnt2.width(),
            ysize2 = $pcnt2.height();
        $('#originalImage').Jcrop({
            onChange: updatePreview,//选框改变时的事件
            //	onSelect: updatePreview,//创建选框，参数格式为：[x,y,x2,y2]
            setSelect: [0, 0, 200, 200],//创建默认选框，参数格式为：[x,y,x2,y2]
            aspectRatio: 1,//选框宽高比。说明：width/height
            boxWidth: 400,//画布宽度
            boxHeight: 400,//画布高度
            minSize: [200, 200],//选框最小尺寸 格式： [0,0]
            bgColor: bgColor,//背景颜色  默认"black"	 透明#00000000
            allowSelect: false,//允许新选框
            allowResize: true//允许选框缩放

        }, function () {
            //使用API来获得真实的图像大小
            var bounds = this.getBounds();//获取图片实际尺寸，格式为：[w,h]
            boundx = bounds[0];
            boundy = bounds[1];

            //初始化预览图
            updatePreview(this.tellSelect());//tellSelect()获取选框的值（实际尺寸）。例子：console.log(jcrop_api.tellSelect())


            scaleFactor = this.getScaleFactor();//获取图片缩放的比例，格式为：[w,h]
            //jcrop_api变量中存储API
            jcrop_api = this;
            //预览进入jcrop容器css定位
            $preview.appendTo(jcrop_api.ui.holder);
            $preview2.appendTo(jcrop_api.ui.holder);
        });


    }


    /**
     * 更新预览
     * @param select 选区 选框的值（实际尺寸）
     */
    function updatePreview(select) {
        var browserVersion = window.navigator.userAgent.toUpperCase();
        if (browserVersion.indexOf("MSIE") > -1 && browserVersion.indexOf("MSIE 6") <= -1) {//IE7-IE9
            thumbnailPreview(select);
        } else {
            //设置预览
            if (parseInt(select.w) > 0) {

                var rx = xsize / select.w;//select.w 代表选区的宽
                var ry = ysize / select.h;//select.h 代表选区的高
                $pimg.css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * select.x) + 'px',
                    marginTop: '-' + Math.round(ry * select.y) + 'px'
                });

                var rx2 = xsize2 / select.w;//select.w 代表选区的宽
                var ry2 = ysize2 / select.h;//select.h 代表选区的高
                $pimg2.css({
                    width: Math.round(rx2 * boundx) + 'px',
                    height: Math.round(ry2 * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx2 * select.x) + 'px',
                    marginTop: '-' + Math.round(ry2 * select.y) + 'px'
                });

            }
        }


        // 赋值
        x = select.x;
        y = select.y;
        width = select.w;
        height = select.h;
    };

    /**
     * ie7+缩略图预览
     * @param select 选区
     * @param bounds 实际内容
     */
    function thumbnailPreview(select) {

        //设置预览
        if (parseInt(select.w) > 0) {
            var rx = xsize / select.w;//select.w 代表选区的宽
            var ry = ysize / select.h;//select.h 代表选区的高
            $("#image_crop_preview_div").css(
                "filter",
                "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + originalImage_realSrc + "')"
            );

            $("#image_crop_preview_div").css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * select.x) + 'px',
                marginTop: '-' + Math.round(ry * select.y) + 'px'
            });

            var rx2 = xsize2 / select.w;//select.w 代表选区的宽
            var ry2 = ysize2 / select.h;//select.h 代表选区的高

            $("#image_crop_preview_div2").css(
                "filter",
                "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + originalImage_realSrc + "')"
            );

            $("#image_crop_preview_div2").css({
                width: Math.round(rx2 * boundx) + 'px',
                height: Math.round(ry2 * boundy) + 'px',
                marginLeft: '-' + Math.round(rx2 * select.x) + 'px',
                marginTop: '-' + Math.round(ry2 * select.y) + 'px'
            });
        }
    }


    //选择文件
    function imgForm(file) {
        if (!verificationImageFormat(file)) {
            return;
        }
        if (jcrop_api) {
            jcrop_api.destroy();//移除 Jcrop
        }

        readImagePath(file, function (src) {

            $("#avatarTag").html(avatarDiv);

            var browserVersion = window.navigator.userAgent.toUpperCase();
            if (browserVersion.indexOf("MSIE") > -1 && browserVersion.indexOf("MSIE 6") <= -1) {//IE7-IE9
                originalImage_realSrc = src;

                //设置原图预览滤镜
                $("#image_crop_original_div").css(
                    "filter",
                    "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + src + "')"
                );
                //获取图片实际大小（由于使用缩放滤镜scale必须指定div宽高，无法做到自适应，因此先通过image滤镜获取实际大小）
                var bounds = getImageBounds(src);
                //按比例缩放图片
                var param = clacImgZoomParam(400, 400, bounds.w, bounds.h);

                $("#image_crop_original_div").width(param.width);
                $("#image_crop_original_div").height(param.height);

                //需要对透明的img使用绝对定位并设置offset为预览div的offset，避免jcrop无法覆盖在预览div上面
                $("#originalImage").css("position", "absolute");
                $("#originalImage").css("display", "inline-block");
                $("#originalImage").offset($("#image_crop_original_div").offset());
                $("#originalImage").width(bounds.w);
                $("#originalImage").height(bounds.h);
                $("#originalImage").attr("src", blankImage);
                $("#originalImage").attr("realSrc", src);

                imageCropp("#00000000");
            } else {//支持html5浏览器
                $('#originalImage').attr('src', src);
                $('#previewImage').attr('src', src);
                $('#previewImage2').attr('src', src);

                imageCropp("black");
            }
        });
    }

    /**
     * 获取图片的实际大小
     * @param tmpSrc 图片源
     * @return {w,h} 宽和高
     */
    function getImageBounds(tmpSrc) {
        var imgObj = new Image();
        imgObj.src = tmpSrc;
        var width = imgObj.width;
        var height = imgObj.height;
        if ((typeof width == "undefined" || width == 0) && (typeof height == "undefined" || height == 0)) {
            var picpreview = document.getElementById("originalImage_box");
            var tempDiv = document.createElement("div");
            picpreview.appendChild(tempDiv);
            tempDiv.style.width = "10px";
            tempDiv.style.height = "10px";
            tempDiv.style.diplay = "none";
            tempDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='" + tmpSrc + "');";
            tempDiv.ID = "previewTemp" + new Date().getTime();
            width = tempDiv.offsetWidth;
            height = tempDiv.offsetHeight;
            picpreview.removeChild(tempDiv);
        }
        return {w: width, h: height};
    };

    /**
     * 按比例缩放图片
     * @param maxWidth 图片最大宽度
     * @param maxHeight 图片最大高度
     * @param width 图片实际宽度
     * @param height 图片实际高度
     * @return {width,height} 宽和高
     */
    function clacImgZoomParam(maxWidth, maxHeight, width, height) {
        var param = {
            width: width,
            height: height
        };
        if (width > maxWidth || height > maxHeight) {
            var rateWidth = width / maxWidth;
            var rateHeight = height / maxHeight;

            if (rateWidth > rateHeight) {
                param.width = maxWidth;
                param.height = Math.round(height / rateWidth);
            } else {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }

        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }


    //读取图片路径  file：file控件 prvid: 图片预览容器
    function readImagePath(file, callback) {
        var supportHTML5 = false;
        var browserVersion = window.navigator.userAgent.toUpperCase();
        if (file.files) {
            supportHTML5 = true;
        } else {
            supportHTML5 = false;
        }
        //进行浏览器判断，选择对应的实现方式
        if (supportHTML5) {
            for (var i = 0, f; f = file.files[i]; i++) {
                var fr = new FileReader();
                fr.onload = function (e) {
                    var src = e.target.result;
                    showPrvImg(src);
                }
                fr.readAsDataURL(f);
            }

        } else if (browserVersion.indexOf("MSIE") > -1 && browserVersion.indexOf("MSIE 6") > -1) {//IE6
            showPrvImg(file.value);
        } else if (browserVersion.indexOf("MSIE") > -1 && browserVersion.indexOf("MSIE 6") <= -1) {//IE7-IE9
            file.select();
            //如果是ie9需要触发blur事件，避免被安全规则阻拦
            if (browserVersion.indexOf("MSIE 9") > -1) {
                file.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问

            }

            var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
            showPrvImg(reallocalpath);
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//FIREFOX
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            var src;
            if (firefoxVersion < 7) {// firefox7以下版本
                src = file.files[0].getAsDataURL();

            } else {// firefox7.0+
                src = window.URL.createObjectURL(file.files[0]);
            }
            showPrvImg(src);
        }

        function showPrvImg(src) {
            callback(src);
        }
    }


    //验证图片格式
    function verificationImageFormat(file) {
        var array = new Array('gif', 'jpg', 'jpeg', 'png', 'bmp'); //可以上传的文件类型
        if (file.value == '') {
            layer.open({
                type: 1,
                title: "错误",
                content: "文件不能为空",
                area: ['260px', '120px'],//宽高
                success: function (layero, index) {
                    return false;
                }
            });
        } else {
            //获取最后一个.的位置
            var index = file.value.lastIndexOf(".");
            //获取后缀
            var ext = file.value.substr(index + 1);

            //循环判断图片的格式是否正确
            for (var i in array) {
                if (ext.toLowerCase() == array[i].toLowerCase()) {
                    return true;
                }
            }
            layer.open({
                type: 1,
                title: "错误",
                content: "<div style='line-height: 30px; font-size: 14px; margin-left: 8px;margin-right: 8px;'>只允许上传gif、jpg、jpeg、bmp、png格式</div>",
                area: ['260px', '120px'],//宽高
                success: function (layero, index) {
                    return false;
                }
            });

        }
    }

    //提交上传图片
    function uploadImageSubmit() {

        //按钮设置 disabled="disabled"
        document.getElementById("uploadSubmit").disabled = true;
        if (width == null) {
            layer.open({
                type: 1,
                title: "错误",
                content: "<div style='line-height: 30px; font-size: 14px; margin-left: 8px;margin-right: 8px;'>请先选择图片</div>",
                area: ['260px', '120px'],//宽高
                success: function (layero, index) {

                }
            });
            //按钮设置 disabled="disabled"
            document.getElementById("uploadSubmit").disabled = false;
            return false;

        }
        //Math.round(number)四舍五入取整
        var _width = Math.round(width);
        var _height = Math.round(height);
        var _x = Math.round(x);
        var _y = Math.round(y);
        if (_x < 0) {
            _x = 0;
        }
        if (_y < 0) {
            _y = 0;
        }

        var context = "?width=" + _width + "&height=" + _height + "&x=" + _x + "&y=" + _y;

        $("#uploadImageForm").ajaxSubmit({
            dataType: 'json',//提交成功后返回的数据格式，可选值包括xml，json或者script
            type: 'POST',// 提交类型可以是"GET"或者"POST"
            url: '/user/control/updateAvatar' + context,// 表单提交的路径
            beforeSend: function () {//表单提交前做表单验证

            },
            //进度条的监听器
            xhr: function () {

                var xhr = $.ajaxSettings.xhr();
                if (onprogress && xhr.upload) {
                    xhr.upload.addEventListener("progress", onprogress, false);
                    return xhr;
                }
            },
            success: function (data) {//提交成功后调用
                for (var returnValue in data) {
                    if (returnValue == "success") {
                        if (data[returnValue] == "true") {
                            layer.msg('更新头像成功,3秒后刷新页面',
                                {
                                    time: 3000 //3秒关闭（如果不配置，默认是3秒）
                                }, function () {
                                    //关闭后的操作
                                    document.location.reload();//刷新页面
                                }
                            );
                        }
                    } else if (returnValue == "error") {
                        var errorValue = data[returnValue];
                        var htmlValue = "";
                        var i = 0;
                        for (var error in errorValue) {
                            if (error != "") {
                                i++;
                                htmlValue += "&nbsp;&nbsp;" + i + "、" + errorValue[error] + "<br>";
                            }
                        }

                        layer.open({
                            type: 1,
                            title: '错误',
                            skin: 'layui-layer-rim', //加上边框
                            area: ['300px', '150px'], //宽高
                            content: htmlValue
                        });
                    }

                }
                //按钮设置 disabled="disabled"
                document.getElementById("uploadSubmit").disabled = false;
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //jquery请求session过期跳转
                timeoutJump(XMLHttpRequest);
            }
        });

    }

    //侦查当前文件上传情况
    function onprogress(evt) {
        //侦查附件上传情况
        //通过事件对象侦查
        //该匿名函数表达式大概0.05-0.1秒执行一次
        // console.log(evt.loaded);  //已经上传大小情况
        //evt.total; 附件总大小
        var loaded = evt.loaded;
        var tot = evt.total;
        var per = Math.floor(100 * loaded / tot);  //已经上传的百分比
        var son = document.getElementById('progressBar');
        son.innerHTML = per + "%";
        son.style.width = per + "%";
    }
</script>


<BODY>
<!-- 引入页头 -->
<div th:include="public/newPublic_2"></div>
<div class="skeleton">
    <div class="main wrap backgroundModule">
        <!-- 引入服务导航 -->
        <div th:include="public/newPublic_4"></div>

        <form id="editUserForm" method="post" autocomplete="off" th:action="@{/user/control/editUser}">
            <!-- 令牌标记 -->
<!--            <input type="hidden" id="token" name="token" th:value="${token}">-->
            <div class="editUserModule wrap">

                <div class="blankTableModule">
                    <div class="updateAvatar">
                        <a href="javascript:void(0);" onclick="javascript: avatarLayer(); return false;">
                            <div id="updateAvatarLink" class="change" style="display: none;"><span>更换头像</span></div>
                        </a>
                        <img th:if="${session.userList.avatarname!=null}"
                             th:src="@{'/readImg'+${session.userList.avatarname}}"/>
                        <img th:if="${session.userList.avatarname==null}" th:src="@{'/static/images/min_avata.png'}"/>

                    </div>
                    <table class="blankTable" border="0" cellSpacing="2" cellPadding="0" width="100%">
                        <tbody>
                        <tr>
                            <td width="160px" align="right">用户名：</td>
                            <td align="left" th:text="${session.userList.username}"></td>
                        </tr>
                        <tr>
                            <td align="right">呢称：</td>
<!--                            <td align="left" th:if="${session.userList.nikename!=null}">-->
<!--                                <input th:text="${session.userList.nikename}"></input>-->
<!--                            </td>-->
                            <td align="left" th:if="${session.userList.nikename!=null}">
                                <input type="text" id="nickname" name="nickname" class="formText" autocomplete="off"
                                       size="25" maxlength="20"/>
                                <span id="nickname_error" class="error"></span>
                                <span class="help">不设置请留空</span>
                            </td>
                        </tr>

                <tr>
                    <td align="right">允许显示用户动态：</td>
                    <td align="left">
                        <label>
                            <input type="radio" class="formRadio" name="allowUserDynamic" value="true" th:checked="${session.userList.allowUserDynamic==1}?checked">
                        <span class="formRadio-core"></span>
                        <span class="formRadio-text">显示</span>
                        </label>
                        <label>
                            <input type="radio" class="formRadio" name="allowUserDynamic" value="false" th:checked="${session.userList.allowUserDynamic==0}?checked">
                        <span class="formRadio-core"></span>
                        <span class="formRadio-text">关闭</span>
                        </label>
                        <span id="allowUserDynamic_error" class="error"></span>
                    </td>
                </tr>

                <tr>
                    <td align="right">旧密码：</td>
                    <td align="left">
                        <input type="password" id="oldPassword" name="oldPassword" class="formText" autocomplete="off"
                               size="25" maxlength="20" onBlur="verification(this.id)" />
                    <span id="oldPassword_error" class="error"></span>
                    <span class="help">不修改密码请留空</span>
                    </td>
                </tr>
                <tr>
                    <td align="right">密码：</td>
                    <td>
                        <input type="password" id="password" name="password" class="formText" autocomplete="off"
                               size="25"
                               maxlength="20" onBlur="verification(this.id)" />
                    <span id="password_error" class="error"></span>
                    <span class="help">不修改请留空</span>
                    </td>

                </tr>
                <tr>
                    <td align="right">确认密码：</td>
                    <td align="left">
                        <input type="password" id="confirmPassword" class="formText" autocomplete="off" size="25"
                               maxlength="20" onBlur="verification(this.id)"/>
                    <span id="confirmPassword_error" class="error"></span>
                    <span class="help">不修改请留空</span>
                    </td>
                <tr>


<tr>
    <td></td>
    <td>
        <span id="user_error" class="error"></span>
        <span class="submitButton"><INPUT type="button" value="提交" onClick="javascript:sureSubmit();"></span>

        <!--
        <span class="submitButton"><INPUT type="button" value="ajax提交" onClick="javascript:ajaxSubmit();"></span>
          -->
        <span id="token_error" class="error" th:text="${result}"></span>
    </td>
</tr>
</tbody>
</table>
</div>
</div>
</form>

</div>
</div>
<!--引入页脚-->
<div th:include="public/newPublic_3"></div>

</BODY>

</HTML>
